import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import Ionicon from 'react-ionicons'
import PriceList from '../components/PriceList'
import MonthPicker from '../components/MonthPicker'
import ViewTab from '../components/ViewTab'
import CreateBtn from '../components/CreateBtn'
import TotalPrice from '../components/TotalPrice'
import { getYearAndMonth, LIST_VIEW, padLeft, TYPE_OUTCOME } from '../utility'

class Home extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      items,
      currentDate: getYearAndMonth(),
      tabView: LIST_VIEW,
    }
  }

  changeDate = () => {

  }
  changeView = (view) => {
    this.setState({
      tabView: view
    })
  }
  createItem = () => {
    this.setState({
      items: [...items]
    })
  }
  editItem = (modifiedItem) => {

  }
  deleteItem = (deleteItem) => {
    const filterArr = this.state.items.filter(item => item.id !== deleteItem.id)
    this.setState({
      items: filterArr
    })
  }

  render() {
    const { items,currentDate, tabView} = this.state

    const itemsWithCategory = items.map(item => {
      item.category = categories[item.cid]
      return item
    }).filter(item => {
      return item.date.includes(`${currentDate.year}-${padLeft(currentDate.month)}`)
    })

    let totalIncome = 0, totalOutcome = 0
    itemsWithCategory.forEach(item => {
      if(item.category.type === TYPE_OUTCOME){
        totalOutcome += item.price
      }else{
        totalIncome += item.price
      }
    })
    
    return (
      <Fragment>
        <div className="App-header">
          <div className="row">
            <div className="col">
              <MonthPicker
                onChange={this.changeDate}
              />
            </div>
            <div className="col">
              <TotalPrice
                income={totalIncome}
                outcome={totalOutcome}
              />
            </div>
          </div>
        </div>
        <div className="content-area py-3 px-3">
          <ViewTab
            onTabChange={this.changeView}
          />
          <CreateBtn
            onClick={this.createItem}
          />
          <PriceList
            editItem={this.editItem}
            deleteItem={this.deleteItem}
          />
        </div>
      </Fragment>
    )
  }
}

Home.propTypes = {

}

export default Home
